<template>
  <div class="vui-header">
    <div class="vui-main flex justify-between">
      <!-- :style="[{ width: !getCollapse ? '200px' : '56px' }]" -->
      <div class="flex-none">
        <vui-logo />
      </div>
      <div class="flex-1 overflow-x-auto overflow-y-hidden vui-header-tabs">
        <vui-tabs layout="common" />
      </div>
      <div class="flex-none">
        <div class="right-panel">
          <!-- <el-popover placement="bottom" trigger="click" width="600">
            <template #reference>
              <el-badge class="item w-6 mr-2" :value="12">
                <vui-icon class="mr-2" icon="mail-line" style="color: #fff" />
              </el-badge>
            </template>
            <div class="notice-msg">
              <div class="notice-msg-top">
                <p>通知</p>
                <el-button class="clear-btn" type="text">清空</el-button>
              </div>
              <div class="notice-msg-list">
                <ul class="list-inner">
                  <li class="list-inner-item">123123</li>
                </ul>
              </div>
              <div class="notice-msg-bottom">
                <el-button type="text">查看全部</el-button>
              </div>
            </div>
          </el-popover> -->

          <div v-if="nowWareHoseInfo" class="mr-4 flex relative h-full avatar-dropdown items-center cursor-pointer">
            <vui-icon class="mr-1" icon="home-gear-fill" style="color: #fff" />
            <div class="text-xs text-white w-28 truncate" :title="nowWareHoseInfo.WAREHOUSE_ID + nowWareHoseInfo.DESCRC">
              {{ nowWareHoseInfo.WAREHOUSE_ID }}
              <!-- <el-tooltip :content="nowWareHoseInfo.DESCRC" effect="light" placement="right"> -->
              <span class="text-s">({{ nowWareHoseInfo.DESCRC }})</span>
              <!-- </el-tooltip> -->
            </div>
            <vui-icon v-if="getWarehouseList.length > 0" icon="arrow-down-s-line" style="color: #fff" />
            <ul
              v-if="getWarehouseList.length > 0"
              class="dropdownMenu-ul scrollbar--light absolute bg-white rounded shadow-2xl p-1 text-center border border-gray-300"
            >
              <li v-for="(item, index) in getWarehouseList" :key="index">
                <div
                  class="cursor-pointer text-gray-500 p-1 pr-0 flex items-center"
                  :class="[item.active ? ' bg-blue-400 text-white' : '']"
                  @click="handleCommand('warehouse', item)"
                >
                  <vui-icon icon="function-fill" />
                  <span>{{ item.DESCRC }}</span>
                </div>
              </li>
            </ul>
          </div>
          <vui-notice v-if="!isMobile && appCode != 'DAMS'" />
          <vui-icon icon="printer-fill" style="color: #fff" @click="printerDownload" />
          <el-menu
            v-if="'horizontal' === layout"
            :active-text-color="variables['menu-color-active']"
            :background-color="variables['menu-background']"
            :default-active="activeMenu"
            menu-trigger="hover"
            mode="horizontal"
            popper-append-to-body
            style="width: 100%"
            :text-color="variables['menu-color']"
          >
            <view v-for="(route, index) in handleRoutes" :key="index + route.name">
              <vui-menu v-if="route.meta && !route.meta.hidden" :item="route" :layout="layout" />
            </view>
          </el-menu>
          <vui-language class="ml-4" />
          <vui-full-screen class="text-white ml-4" />
          <!-- <vui-theme /> -->
          <vui-refresh class="text-white ml-4" />
          <vui-avatar />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { computed, defineComponent, ref, watch, watchEffect } from 'vue'
  import { useStore } from 'vuex'
  import { useRoute } from 'vue-router'
  import { handleActivePath, handleMatched } from '@/utils/routes'
  import isArray from 'lodash/isArray'
  import variables from '@/vui/styles/variables/variables.scss'

  export default defineComponent({
    name: 'VuiHeader',
    props: {
      layout: {
        type: String,
        default: 'horizontal',
      },
    },
    setup() {
      const store = useStore()
      const route = useRoute()

      const routes = computed(() => store.getters['routes/routes'])
      const activeName = computed(() => store.getters['routes/activeName'])

      const activeMenu = ref()
      const menuTrigger = ref('hover')

      const handleRoutes = computed(() =>
        routes.value.flatMap((_route) => {
          return _route.meta && _route.meta.levelHidden === true && _route.children ? _route.children : _route
        })
      )
      const printerDownload = () => {
        window.open('/login/Inoview.PrintClient.exe')
      }
      watchEffect(() => (activeMenu.value = handleActivePath(route)))

      watch(
        () => activeName.value,
        (val) => {
          const matched = handleMatched(routes.value, val)
          activeMenu.value = matched[matched.length - 1].path
        }
      )
      const getCollapse = computed(() => store.getters['settings/collapse'])
      const appCode = computed(() => store.getters['user/appCode'])
      const wareHoseId = computed(() => store.getters['user/wareHoseId'])
      const warehouseList = computed(() => store.getters['user/warehouseList'])
      const isMobile = computed(() => process.env.VUE_APP_BuildProjectType === 'mobile')
      let nowWareHoseInfo = ''
      if (isArray(warehouseList.value)) {
        nowWareHoseInfo = warehouseList.value.find((v) => v.WAREHOUSE_ID === wareHoseId.value)
      }
      const handleCommand = async (command, option) => {
        switch (command) {
          case 'warehouse':
            await store.dispatch('user/switchWarehouse', option)
            break
        }
      }
      console.log('nowWareHoseId', nowWareHoseInfo, appCode.value)
      return {
        variables,
        activeMenu,
        handleCommand,
        menuTrigger,
        handleRoutes,
        getCollapse,
        getWarehouseList: computed(() => store.getters['user/warehouseList']),
        printerDownload,
        nowWareHoseInfo,
        appCode,
        isMobile,
      }
    },
  })
</script>

<style lang="scss" scoped>
  .vui-header {
    display: flex;
    align-items: center;
    justify-items: flex-end;
    height: $base-header-height;
    background: linear-gradient(90deg, #3a486a 1%, #293450);

    .vui-main {
      padding: 0;

      .right-panel {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        height: $base-header-height;

        :deep() {
          .el-sub-menu__icon-more {
            margin-top: #{math.div($base-header-height - 20, 2)} !important;
          }

          > .el-menu--horizontal.el-menu {
            > .el-sub-menu > .el-sub-menu__title {
              padding-right: 0;
              > .el-sub-menu__icon-arrow {
                //margin-top: #{math.div($base-header-height - 11, 2)} !important;
                margin-top: -5px !important;
                position: relative !important;
                margin-left: 30px;
                margin-right: 0;
              }
            }
            > .el-menu-item {
              .el-tag {
                position: relative !important;
                margin-top: 0 !important;
                margin-left: 25px;
                margin-right: -20px;
              }

              .vui-dot {
                float: right;
                margin-top: #{math.div($base-header-height - 6, 2)} + 1;
              }

              @media only screen and (max-width: 1199px) {
                .el-tag {
                  display: none;
                }
              }
            }
          }

          .el-menu {
            &.el-menu--horizontal {
              width: 100%;
              display: flex;
              align-items: center;
              justify-content: flex-end;
              height: $base-header-height;
              border-bottom: 0 solid transparent !important;

              .el-menu-item,
              .el-sub-menu__title {
                height: #{math.div($base-header-height, 1.3)};
                padding: 0 $base-padding;
                line-height: #{math.div($base-header-height, 1.3)};
              }

              > .el-menu-item,
              > .el-sub-menu {
                height: $base-header-height;
                line-height: $base-header-height;

                .el-sub-menu__icon-arrow {
                  float: right;
                  margin-top: #{math.div($base-menu-item-height - 16, 2)};
                }

                > .el-sub-menu__title {
                  display: flex;
                  align-items: flex-start;
                  height: $base-header-height;
                  line-height: $base-header-height;
                }
              }
            }

            [class*='ri-'] {
              margin-left: 0;
              cursor: pointer;
            }

            .el-sub-menu,
            .el-menu-item {
              i {
                color: inherit;
              }

              &.is-active {
                border-bottom: 0 solid transparent;

                .el-sub-menu__title {
                  border-bottom: 0 solid transparent;
                }
              }
            }

            .el-menu-item {
              &.is-active {
                background: var(--el-color-primary) !important;
              }
            }
          }

          .user-name {
            color: var(--el-color-white);
          }

          .user-name + i {
            color: var(--el-color-white);
          }

          [class*='ri-'] {
            cursor: pointer;
          }

          button {
            svg {
              margin-right: 0;
              color: var(--el-color-white);
              cursor: pointer;
              fill: var(--el-color-white);
            }
          }
        }
      }
    }
    .vui-header-tabs {
      width: calc(100% - 480px);
    }
  }
</style>

<!--由于element-plus
bug使用popper-append-to-body=false会导致多级路由无法显示，故所有菜单必须生成至body下，样式必须放到body下-->
<style lang="scss" scoped>
  @mixin menuActiveHover {
    &:hover,
    &.is-active {
      i {
        color: var(--el-color-white) !important;
      }

      color: var(--el-color-white) !important;
      background: var(--el-color-primary) !important;

      .el-sub-menu__title {
        i {
          color: var(--el-color-white) !important;
        }

        color: var(--el-color-white) !important;
        background: var(--el-color-primary) !important;
      }
    }
  }

  .el-popper {
    .el-menu--horizontal {
      height: #{math.div($base-header-height, 1.3)};
      border-bottom: 0 solid transparent !important;

      @media only screen and (max-width: 1199px) {
        .el-tag {
          display: none;
        }
      }
      .el-tag {
        position: absolute;
        right: 20px;
        margin-top: 0 !important;
      }
      .vui-dot {
        position: absolute;
        right: 20px;
        margin-top: 0 !important;
      }

      .el-menu-item,
      .el-sub-menu {
        height: #{math.div($base-header-height, 1.3)};
        line-height: #{math.div($base-header-height, 1.3)};
        @include menuActiveHover;

        i {
          color: inherit;
        }

        .el-sub-menu__icon-arrow {
          float: right;
        }

        .el-sub-menu__title {
          height: #{math.div($base-header-height, 1.3)};
          line-height: #{math.div($base-header-height, 1.3)};
          @include menuActiveHover;
        }
      }
    }
  }
  .avatar-dropdown:hover {
    .dropdownMenu-ul {
      display: block;
    }
  }
  .dropdownMenu-ul {
    display: none;
    top: calc(100% - 3px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 200px;
    max-width: 260px;
    border: 1px solid #dedede;
    span {
      width: 150px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    li {
      position: relative;
      ul {
        max-height: 400px;
        overflow-y: scroll;
        display: none;
        top: 0;
        left: -158px;
        text-align: left;
      }
    }
    li:hover {
      background-color: #dedede;
      > ul {
        display: block;
      }
    }
  }
</style>
